<template>
  <main class="c-topic">
    <div v-if="media">
      <section class="c-topic_item" >
        <div class="c-topic_brand D3media" :style="mediaBigPic">
          <img :src="media.bigImage" class= "toptic-media " >
          <a href="http://a.app.qq.com/o/simple.jsp?pkgname=com.snailvr.manager&ckey=CK1340670182054" class="recommend-play_icon"></a>
        </div>
      </section>
      <section class="alone-btn_wrapper">
        <a href="http://a.app.qq.com/o/simple.jsp?pkgname=com.snailvr.manager&ckey=CK1340670182054" class="button along_btn">前往APP享受{{type}}效果</a>
      </section>
      <section class="mes-box">
        <h3 class="mes-box_title" >
          <span class="itemtitle">{{media.title}}</span>
          <span class="mes-play_score"><i class="icon-star " :class="`icon-star${media.scoreSeries}`"></i>{{media.score}}分</span>
        </h3>
        <p class="mes-box_labels">
          <span class="playcount"><i class="icon icon-playcount"></i>{{media.playCount}}次播放</span>
          <span class="label" v-if="media.tags && media.tags.length>0" v-for="tag in media.tags" >#{{tag}}</span>
        </p>         
        <hr class="horizontal-line_gray" />
        <article class="mes-box_mes size-l js-mesbox_mes">
          <ul class="mex-box_flex">
            <li ><span class="name">地区：</span>{{media.area}}</li>
            <li ><span class="name">年代：</span>{{media.year}}</li>
          </ul>
          <p v-if="media.directors" ><span class="name">导演：</span><span>{{ media.directors.join('、') }}</span></p> 
          <p class="mes-box_actors"><span class="name">主演：</span><span>{{ media.actors.join('、') }}</span></p>
          <sharepage-intro :intro="media.intro" ></sharepage-intro>
        </article>
      </section>
    </div>
    <div v-else class="err-tip-contain">
      <div class="spinner" v-if="loading"></div>        
      <p v-else>地址错误，请访问正确地址</p>
    </div>
    <global-footer></global-footer>
  </main>
</template>
<script>
  import setFalse from 'ployfill/';
  import film from 'services/films-show';
  import GlobalFooter from 'components/global-footer';
  import SharepageIntro from 'pages/components/sharepage-intro';
  import { sharewx } from 'services/sharewx';

  export default {
    components: { GlobalFooter, SharepageIntro },
    data () {
      return {
        media: null,
        mediaBigPic: {
          backgroundImage: ''
        },
        type: '',
        loading: true
      };
    },
    computed: {
      byteSize () {
        const contentWidth = document.documentElement.clientWidth || document.body.clientWidth;
        return (contentWidth / 1080 * 36);
      }
    },
    mounted () {
      this.mesBox = this.getMesbox();
      film.get().then((data) => {
        this.loading = false;
        if (data) {
          this.media = data;
          if (data.intro.length > Math.floor((this.mesBox / this.byteSize) * 6)) {
            this.media.intro = data.intro.slice(0, Math.floor((this.mesBox / this.byteSize) * 6) - 12).concat('...');
          }
          this.type = data.videoType === 'vr' ? '全景' : (data.videoType === '3d' ? '3D' : '2D');
          this.mediaBigPic.backgroundImage = `url(${data.bigImage})`;
          document.title = `VR视频 | ${data.title}`;
          document.head.querySelector('meta[name="description"]').content = data.initIntro;
          sharewx({
            title: data.title,
            imgUrl: data.smallImage,
            desc: data.intro
          });
        } else {
          this.media = null;
        }
      }).catch(() => {
        this.loading = setFalse();
      });
    },
    methods: {
      getMesbox () {
        const contentWidth = document.documentElement.clientWidth || document.body.clientWidth;
        const mesbox = document.querySelector('.js-mesbox_mes');
        if (mesbox) {
          return mesbox.clientWidth;
        }
        return contentWidth;
      }
    }
  };
</script>
<style lang="scss" scoped>
  .mes-box_title .itemtitle {
    display: inline-block;
    width: calc(100vw - 4.84rem);
  }
  .mes-play_score {
    float: right;
    display: inline-block;
    min-width: 3rem;
    height: inherit;
    padding: 0;
    text-align: right;
    vertical-align: text-top;
  }
  .alone-btn_wrapper {    
    padding: .28rem 0;
    text-align: center;
    font-size: 0;
    background-color: #fff;
  }
  .along_btn {
    width: 90%;
    color: white;
    background-color: #34b1fe;
    padding: .7em 1.35em .6em;
    text-align: center;
    font-size: .42rem;
    border-radius: .1rem;    
  }
</style>
